<template>
    <div class="calendar">
        <div class="header">
            <!-- <button @click="prevMonth">&lt;</button>
            <h2>{{ currentMonth }}</h2>
            <button @click="nextMonth">&gt;</button> -->
            <i class="el-icon-back"></i>
            <span>{{ currentMonth }}</span>
            <i class="el-icon-right"></i>
        </div>
        <div class="days">
            <div class="day" v-for="(day, index) in daysInMonth" :key="index"
                :class="{ 'current-day': isCurrentDay(day), 'outside-month': !isSameMonth(day), 'disabled': !isWithinMonth(day) }">
                {{ day.getDate() }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentDate: new Date()
        };
    },
    computed: {
        currentMonth() {
            return this.currentDate.toLocaleString('default', { month: 'long', year: 'numeric' });
        },
        daysInMonth() {
            const year = this.currentDate.getFullYear();
            const month = this.currentDate.getMonth();
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const days = [];

            for (let i = 0; i < 42; i++) {
                const day = new Date(year, month, i + 1 - firstDay.getDay());
                days.push(day);
            }

            return days;
        }
    },
    methods: {
        prevMonth() {
            this.currentDate.setMonth(this.currentDate.getMonth() - 1);
        },
        nextMonth() {
            this.currentDate.setMonth(this.currentDate.getMonth() + 1);
        },
        isSameMonth(day) {
            return day.getMonth() === this.currentDate.getMonth();
        },
        isWithinMonth(day) {
            const currentMonth = this.currentDate.getMonth();
            const currentYear = this.currentDate.getFullYear();
            return day.getMonth() === currentMonth && day.getFullYear() === currentYear;
        },
        isCurrentDay(day) {
            const today = new Date();
            return day.toDateString() === today.toDateString();
        }
    }
};
</script>

<style scoped>
.calendar {
    width: 300px;
    margin: auto;
    font-family: Arial, sans-serif;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.day {
    padding: 10px;
    border: 1px solid transparent;
    text-align: center;
}

.day.current-day {
    border: 1px solid rgb(90, 156, 248);
    color: rgb(90, 156, 248);
}

.day.outside-month {
    color: #ccc;
}

.day.disabled {
    pointer-events: none;
}
</style>